<template>
    <div class="container sub-container">
        <div class="inner">
            <Breadcrumb class="system-breadcrumb">
                <BreadcrumbItem to="/classlist">公开党课</BreadcrumbItem>
                <BreadcrumbItem>
                    <span  v-if='isEdit==1'>修改</span>
                    <span  v-else>新建</span>
                </BreadcrumbItem>
            </Breadcrumb> 
            <div class="system-form system-form-large">
                <Form ref="form" :model="form" :rules="ruleValidate" :label-width="120" :hide-required-mark="true">
                    <FormItem prop="title" label="选择视频">
                        <Input class="common-input" v-model="videoName" placeholder="请选择视频" style="width:300px;background:#f3f3f3 !important;" disabled />
                        <div class="input-video" style="display:inline-block;position:relative;margin-left:10px;cursor: pointer">
                            <Button type="primary" class="margin-right-25" style="cursor: pointer;background:#EB4F4D;">上传视频</Button>
                            <input
                                @change="changeVideo"
                                id="imgFile"
                                class="upload_input"
                                type="file"
                                accept="video/*"
                                style="margin-left:10px;position: absolute;left: -10px;opacity: 0;"/>
                            </div>

                        <!-- <Input class="common-input" v-model="form.title" placeholder="请输入标题" /> -->
                    </FormItem>
                    <FormItem prop="title" label="视频标题">
                        <Input class="common-input" v-model="form.title" placeholder="请输入标题" />
                    </FormItem>
                    <FormItem prop="content" label="视频描述">
                        <system-quill-editor v-model="form.content" ref='quillChild'></system-quill-editor>
                    </FormItem>
                    <!-- <FormItem prop="targetUserIds" label="发布机构">
                        <Select class="common-input" v-model="form.targetUserIds"  multiple  placeholder="请选择发布机构">
                            <Option v-for="item in userList" :value="item.id" :key="item.id">{{ item.username }}</Option>
                        </Select>
                    </FormItem> -->
                    <!-- <FormItem prop="exTime" label="发布时间">
                        <DatePicker v-model="form.exTime" type="datetime" ref="exTime"
                        @on-change="changeTime('exTime')"  :editable="false" placeholder="请选择发布时间"></DatePicker>
                        <!-- <Input class="common-input" v-model="form.exTime" placeholder="请选择会议时间" /> -->
                    <!-- </FormItem>  -->
                   
                    <FormItem>
                        <Button type="primary" class="margin-right-25 uploadVideo" @click="handleSubmit('form')">
                            <!-- <span v-if='isEdit!=1'></span>
                            <span v-if="isEdit==1">修改</span> -->
                            <span v-if='isEdit==1 && status!=1'>修改</span>
                            <span v-else>上传视频</span>

                        </Button>
                        <Button type="primary" class="margin-right-25 uploadVideo" @click="handleDraftSubmit('form')">
                            <span v-if='isEdit!=1'>保存草稿</span>
                            <span v-if='isEdit==1'>修改草稿</span>
                        </Button>
                        <!-- <Button type="primary" class="margin-right-25" @change="changeVideo">重新选择</Button> -->
                        <Button type="primary" @click="goBack" ghost>返回</Button>
                    </FormItem>
                </Form>
            </div>
        </div>
    </div>
</template>

<script>
// import SystemQuillEditor from '@/components/SystemQuillEditor'
import SystemQuillEditor from '@/components/SystemQuillEditor'
import { getUserListNoselfRest, classCreate,uploadFile ,classView,classEdit} from '@/common/apis/system'
import moment from 'moment'

export default {
    name: "addClass",
    components: {
        SystemQuillEditor
    },
    data() {
        return {
            type: 1,
            userList: [],
            videoName:'',
            form: {
                title: '',
                // targetUserIds: '',
                exTime:'',
                sha1: '',
                content: '',
                status:''
            },
            ruleValidate: {
                sha1: [
                    { required: true, message: '请上传视频', trigger: 'blur' }
                ],
                title: [
                    { required: true, message: '标题不能为空', trigger: 'blur' }
                ],
                // targetUserIds: [
                //     { required: true, type: 'array', message: '发布机构不能为空', trigger: 'change' }
                // ],
                content: [
                    { required: true, message: '公告内容不能为空', trigger: 'blur' }
                ]
            },
            isEdit:0, //1修改 0新增
            status:''
        }
    },
    mounted() {
        this.initData()
        console.log(this.$route.query)
        if(this.$route.query.id){
            this.isEdit=1
            this.getData()
        }else{
            this.isEdit=0
        }
    },
    methods: {
        changeVideo() {
                let _this = this;
                var file = document.getElementById("imgFile").files[0];
                console.log(file.name)
                this.videoName = file.name
                _this.file = file;
                var ids = this.ids;
                var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加 
                if (file) {
                    formData.append("file", file); //接口需要传递的参数
                    formData.append("type", 3); //接口需要传递的参数
                }
                let params = formData;
                uploadFile(params).then(res=>{
                    if(res.data.code==200){
                        _this.form.sha1 = res.data.content.sha1
                    }
                })
            },
        changeTime(refName){
            this.$refs[refName].onSelectionModeChange('time');
            this.form.exTime = this.$refs.exTime.visualValue
            console.log(this.form.exTime)
        },
        chooseVideo(){

        },
        getData(){
            let _this = this
            let id = this.$route.query.id
            classView(id).then(res=>{
                console.log(res.data)
                if(res.data.code==200){
                    // _this.playerOptions['sources'][0]['src'] = res.data.content.filePath;
                    // _this.classInfo = res.data.content
                    _this.videoName=res.data.content.fileName
                    _this.form.title=res.data.content.title
                    _this.form.sha1=res.data.content.sha1
                    _this.$refs.quillChild.content=res.data.content.content
                    _this.status=res.data.content.status

                }
            })
        },
        initData() {
            this.getUserListNoself()
        },
        getUserListNoself() {
            getUserListNoselfRest().then(result =>{
                this.userList = result.data.content
            })
        },
        handleDraftSubmit(name){
            // 保存草稿
            let _this = this
            this.form.exTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
            console.log(this.$refs.quillChild.content)
            this.form.content = this.$refs.quillChild.content
            this.form.status = 1
            this.$refs[name].validate(valid => {
                if (valid) {
                    
                    if(_this.isEdit==1){
                        //修改
                        const params = {
                            ..._this.form,
                            id:parseInt(_this.$route.query.id)
                        }
                        classEdit(params).then(result => {
                            console.log(result)
                            if (result.data.code === 200) {
                                // this.handleSuccess()
                                this.$Message.success({
                                    background: true,
                                    content: '修改草稿成功'
                                })
                                this.$router.push('/classlist')
                            } else {
                                this.handleError(result.data.msg)
                            }
                        })
                    }else{
                        const params2 = {
                            ..._this.form
                        }
                        classCreate(params2).then(result => {
                            console.log(result)
                            if (result.data.code === 200) {
                                // this.handleSuccess()
                                this.$Message.success({
                                    background: true,
                                    content: '保存草稿成功'
                                })
                                this.$router.push('/classlist')
                            } else {
                                this.handleError(result.data.msg)
                            }
                        })
                    }
                    
                }
            })
        },
        handleSubmit(name) {
            let _this = this
            // this.form.exTime = moment(this.form.exTime).valueOf()
            this.form.exTime = moment(new Date()).format('YYYY-MM-DD hh:mm:ss')
            console.log(this.$refs.quillChild.content)
            this.form.content = this.$refs.quillChild.content
            this.form.status = 2
            this.$refs[name].validate(valid => {
                console.log(1)
                if (valid) {
                console.log(2)

                     if(_this.isEdit==1){
                         // 修改
                         const params = {
                            ..._this.form,
                            id:parseInt(_this.$route.query.id)
                        }
                        classEdit(params).then(result => {
                            console.log(result)
                            if (result.data.code === 200) {
                                _this.handleSuccess()
                                _this.$router.push('/classlist')
                            } else {
                                _this.handleError(result.data.msg)
                            }
                        })
                     }else{
                         const params1 = {
                            ..._this.form
                        }
                        classCreate(params1).then(result => {
                            console.log(result)
                            if (result.data.code === 200) {
                                _this.handleSuccess()
                                _this.$router.push('/classlist')
                            } else {
                                _this.handleError(result.data.msg)
                            }
                        })
                     }
                    
                }
            })
        },
        handleSuccess(msg) {
            this.$Message.success({
                background: true,
                content: this.isEdit==1?'修改成功':(msg || '发送成功')
            })
        },
        handleError(msg) {
            this.reset()
            this.$Message.error({
                background: true,
                content: this.isEdit==1?'修改失败':(msg || '发送失败')
            })
        },
        reset() {
            this.$refs.form.resetFields()
            this.$refs.myQuillEditor.handleClearEditor()
        },
        goBack() {
            this.$router.push('/classlist')
        }
    }
}
</script>
<style lang="less">
.ivu-input[disabled], fieldset[disabled] .ivu-input{
    background: #f3f3f3;
    color: #515a6e;
}
.uploadVideo{
    cursor: pointer;
}
</style>